<template>
  <div id="home">
    <van-tabs v-model="active">
        <van-tab v-for="item in channels" :title="item.name" :key="item.id">
           <!-- <div class="scroll-wrapper">
            <div v-for="num in 40" :key="num">{{ item.name }}的内容</div>
          </div> -->
          <article-list :channel='item' @show-more='handleShowMore'></article-list>
          <!-- 频道列表开关 通过定位 -->
          <div class="bar-btn" @click="showChannelEdit=true">
            <van-icon name="wap-nav"/>
          </div>
        </van-tab>
    </van-tabs>

    <van-popup v-model="showMore" :style="{ width: '80%' }">
      <more-action ref="refMoreAction" @dislike='dislike' @report='report' :showmore='showMore'></more-action>
    </van-popup>

    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <channel-edit @update-curchannel='updateCurChannel' :active='active' @update-active='changeActive'></channel-edit>
  </van-action-sheet>
  </div>
</template>

<script>
// import { reqGetChannels } from '@/api/channels.js'
import ArticleList from './articleList.vue'
import MoreAction from '@/views/home/moreAction.vue'
import ChannelEdit from '@/views/home/channelEdit.vue'
import { reqDisLikeArticle, reqReportArticle } from '@/api/article.js'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'home',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      // channels: [],
      showMore: false,
      articleId: null,
      active: 0,
      showChannelEdit: false
    }
  },
  created () {
    // this.loadChannel()
    this.getChannelAsync()
  },
  computed: {
    ...mapState(['channels'])
  },
  methods: {
    // async loadChannel () {
    //   const res = await reqGetChannels()
    //   //   console.log(res.data.data.channels)
    //   this.channels = res.data.data.channels
    // },
    ...mapActions(['getChannelAsync']),
    handleShowMore (articleId) {
      this.showMore = true
      this.$nextTick(() => {
        console.log(this.$refs.refMoreAction)
        this.$refs.refMoreAction.isReport = false
      })
    },
    async dislike () {
      // console.log('不感兴趣的', this.articleId)
      // const res = await reqDisLikeArticle(this.articleId)
      // console.log(res.data)
      // console.log(this.active)
      // console.log(this.channels[this.active].id)
      await reqDisLikeArticle(this.articleId)
      this.showMore = false
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }

      this.$eventBus.$emit('del-article', eventObj)
    },
    async report (typeId) {
      // console.log(typeId)
      await reqReportArticle(this.articleId, typeId)
      // console.log(res.data)
      this.showMore = false
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }
      this.$eventBus.$emit('del-article', eventObj)
    },
    updateCurChannel (channel) {
      // console.log(channel)
      this.showChannelEdit = false
      const index = this.channels.findIndex(item => item.id === channel.id)
      if (index !== -1) {
        this.active = index
      }
    },
    changeActive (num) {
      this.active = num
    }
  }

}
</script>
<style lang="scss" scoped>
// #home {
//   height: 100vh;
//   padding-top:46px ;
//   box-sizing: border-box;
//   overflow: hidden;
//   .van-tabs {
//     height: 100%;
//     padding-top: 57px;
//     // 导航部分
//     .van-tabs__wrap {
//       position:fixed;
//       top: 46px;
//       left: 0px;
//       right: 30px;
//     }
// }
// }

</style>

<style lang='scss'>
// #home {
//   height: 100vh;
//   padding-top:46px ;
//   box-sizing: border-box;
//   overflow: hidden;
//   .van-tabs {
//     height: 100%;
//     padding-top: 57px;
//     // 导航部分
//     .van-tabs__wrap {
//       position:fixed;
//       top: 46px;
//       left: 0px;
//       right: 30px;
//     }
//     // 内容部分
//     .van-tabs__content {
//       height: 100%;
//       overflow: scroll;
//       .van-tab__pane {
//         padding-bottom: 100px;
//       }
//     }
//   }
// }
#home {
  padding-top:46px ;
  //  box-sizing: border-box;
  .van-tabs__wrap {
    position:fixed;
    top:46px;
    left: 0px;
    right: 22px;
    z-index: 999;
  }
  .van-tabs__content {
    height: 100%;
    .van-tab__pane {
      height: 100%;
    }
  }
  .van-tabs__line {
    background-color: #3196fa;
  }
  // 频道管理的开关按钮
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index:1;
  .van-icon-wap-nav{
    font-size: 20px;
  }
}

}

</style>
